<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索 添加 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="cateList" border stripe>
        <!-- stripe: 斑马条纹
        border：边框-->
        <el-table-column type="index" label="编号" width="140"></el-table-column>
        <el-table-column prop="catName" label="分类名称"></el-table-column>
        <el-table-column prop="catParentId" label="父类名称"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" >
            <template slot-scope="scope">
              <el-popconfirm @confirm="removeCate(scope.$index, scope.row)"
                             title="确定删除该分类吗?">
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    slot="reference"
                    size="mini"
                ></el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
      <el-form label-width="100px">
        <el-form-item label="分类名称：" prop="catName" >
          <el-input v-model="addCateForm.catName" ></el-input>
        </el-form-item>
        <el-form-item label="父级分类:" STYLE="margin-left: -10PX">
          <template>
            <el-select v-model="value" placeholder="请选择" style="margin-left: 10px">
              <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
              <el-option v-for="c in cateList"
                         :label="c.catName"
                         :value="c.catId">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data () {
    return {
      value: '',
      // 商品分类数据
      cateList: [],
      // 查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      columns: [
      ],

      // 添加分类
      addCateDialogVisible: false,
      // 添加分类对象
      addCateForm: {
        catName:'',
        catParentId:0,
        catLevel:0,
        catKeywords:'',
        catIcon:'',
        catSort:0,
        catEnable:1,
        catIsParent:0,
        catIsDisplay:1
      },
      // 添加分类表单的验证规则
     /* addCateFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },*/
      // 父级分类列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      cascaderProps: {
        // 配置触发选项 hover/click
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 选中的父级Id数组
      selectedKeys: [],
      // 编辑对话框 控制
      editCateDialogVisible: false,
      // 编辑分类表单验证
      editCateFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      // 编辑表单 绑定对象
      editCateForm: ''
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 获取商品分类
    getCateList () {
      //发请求获取所有分类信息
      let url = "http://localhost:8080/categories/list"
      this.axios.get(url).then((response) => {
        this.cateList = response.data.data;
        console.log("分类list")
      })
    }
    ,
    showAddCateDialog () {
      // 先获取父级分类数据
      this.getParentCateList()
      // 再打开对话框
      this.addCateDialogVisible = true
    },
    // 获取父级分类的数据
    async getParentCateList () {
    },
    // 添加分类 选择项发生变化触发
    parentCateChanged () {
      // 如何selectKeys 数组的长度>0 说明选中父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 当前分类的等级
        this.addCateForm.cat_level = this.selectedKeys.length
        return 0
      } else {
        // 父级分类的Id
        this.addCateForm.cat_pid = 0
        // 当前分类的等级
        this.addCateForm.cat_level = 0
      }
    },
    // 添加分类 重置表单
    addCateDialogClosed () {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
    // 删除分类
    removeCate (index,cateList) {
      let url = "http://localhost:8080/categories/delete?catName="+cateList.catName
      this.axios.get(url).then((response) => {
            console.log(cateList.catName)
            this.getCateList()
      })
    },
    addCate () {
      let url = "http://localhost:8080/categories/add/new";
      console.log(this.addCateForm);
      this.axios.post(url,this.addCateForm).then(function () {
        alert("添加完成!");
        location.reload();
      });
      this.addCateDialogVisible = false;

    }
  }
}
</script>

<style lang='less' scoped>
.treeTable {
  margin-top: 20px;
}
// .el-cascader {
//   width: 100%;
// }
</style>
